<template>
  <div class="listWrap" ref="tableScorll">
    <div class="listbar">
      <van-pull-refresh v-model="rloading" @refresh="onRefresh" :disabled="refreshDisabled"
        style="height: 100%;position: relative;">
        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" :offset="1">
          <slot></slot>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>
<script setup>
import { useRouter, useRoute } from 'vue-router';
import { ref, onMounted, watch } from 'vue';

const { getList, resetList } = defineProps(["getList", "resetList"]);
// const emits = defineEmits(["getList"]);
const router = useRouter()
const rloading = ref(false); //下拉刷新
const refreshDisabled = ref(false); //下拉刷新
const tableScorll = ref(null);
const scrollTop = ref(0); //下拉刷新
const finished = ref(false); //上拉加载完毕
const loading = ref(false); //上拉加载
const pageIndex = ref(0);
const list = ref([])
const total = ref(0)

const getData = async () => {
  let data = await getList(pageIndex.value)
  // console.log(data);
  total.value = data.total
  list.value = data.list
}

onMounted(() => {
  // getData()
  tableScorll.value.addEventListener("scroll", () => {
    // console.log(131);
    scrollTop.value = tableScorll.value.scrollTop;
  });
})
//监听滚动条
watch(scrollTop, (newValue, oldValue) => {
  if (newValue >= 1) {
    refreshDisabled.value = true;
  } else {
    refreshDisabled.value = false;
  }
});
//下拉刷新
const onRefresh = () => {
  setTimeout(async () => {
    //重置
    pageIndex.value = 0;
    list.value = [];
    resetList && resetList()
    loading.value = true;
    finished.value = false;
    rloading.value = false;
    await onLoad();
  }, 500)
};
//上拉加载
const onLoad = async () => {
  pageIndex.value = pageIndex.value + 1;
  await getData()
  loading.value = false;
  if (list.value.length >= total.value) {
    finished.value = true;
  }
};

</script>
<style lang="less" scoped>
.listWrap {
  overflow: auto;
  // height: calc(100vh - 210px);
  height: 100%;

  /deep/.van-pull-refresh {
    overflow: inherit;
  }

}
</style>
